<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="1000px"
    top="2vh"
    @close="close"
  >
    <el-form ref="formRef" label-width="150px" :model="form" :rules="rules">
      <el-form-item label="任务内容" prop="WorkTaskName">
        <el-input v-model="form.WorkTaskName" disabled />
      </el-form-item>
      <el-form-item label="任务数量" prop="WorkTaskNum">
        <el-input v-model="form.WorkTaskNum" disabled />
      </el-form-item>
      <el-form-item label="计划完成日期" prop="PlanFinishDate">
        <el-input v-model="form.PlanFinishDate" disabled />
      </el-form-item>
      <el-form-item label="开始制作日期" prop="StartDate">
        <el-date-picker
          v-model="form.StartDate"
          :disabled-date="disabledDate"
          type="date"
          disabled
          placeholder="请选择开始制作日期"
          :size="size"
        />
      </el-form-item>
      <el-form-item label="实际完成日期" prop="FinishDate">
        <el-date-picker
          v-model="form.FinishDate"
          :disabled-date="disabledDate"
          type="date"
          :disabled="form.TaskState == 2 && form.SubmitCheckState == 1"
          placeholder="请选择实际完成日期"
          :size="size"
        />
      </el-form-item>
      <el-form-item label="实际完成数量" prop="FinishNum">
        <el-input-number
          v-model="form.FinishNum"
          :min="0"
          :max="form.WorkTaskNum"
          :disabled="form.TaskState == 2 && form.SubmitCheckState == 1"
        />
      </el-form-item>
      <el-form-item label="详情说明">
        <div style="width: 100%; height: 100%; border: 1px solid #ccc">
          <Toolbar
            :editor="editorRef"
            style="border-bottom: 1px solid #e8e8e8"
          />
          <Editor
            v-model="form.SubmitTaskMemo"
            class="wang-editor-content"
            :default-config="editorConfig"
            style="height: 400px"
            @on-created="handleCreated"
            @mouseover="changeEditor"
          />
        </div>
      </el-form-item>
      <el-form-item label="二次审核人">
        <el-select
          v-model="form.TaskCheckerID"
          :disabled="form.TaskState == 2 && form.SubmitCheckState == 1"
          tyle="width: 30%"
        >
          <el-option label="请选择二次审核人" :value="0" />
          <el-option
            v-for="(item, index) in TaskCheckerList"
            :key="index"
            :label="item.AssignStaffName"
            :value="item.AssignStaffID"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div v-if="form.rejectReason && form.TaskState == -1">
      <span>驳回原因</span>
      :
      <span style="color: red">{{ form.rejectReason }}</span>
    </div>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button
        v-if="form.TaskState != 2 || form.SubmitCheckState != 1"
        type="primary"
        @click="save"
      >
        确 定
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { worktasklistEdit } from '@/api/worktask'
  import '@wangeditor/editor/dist/css/style.css'
  // import { IDomEditor } from '@wangeditor/editor'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

  export default defineComponent({
    name: 'WorktaskDesignerTaskinfoEdit',
    components: { Editor, Toolbar },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const editorRef = shallowRef()

      const html = ref('')
      const editorConfig = ref({
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            server:
              'https://api.sanjianke.com/common/Upload/upload?file=teamwork&type=image', // 你的服务器地址，注意：当前接口格式特殊与其他vab接口不同，请查看vip文档
            fieldName: 'file',
            allowedFileTypes: ['image/*'],
            mode: 'cors',
            headers: {}, // 如需传递token请写到在这里
          },
        },
      })

      const changeEditor = () => {
        const editor = editorRef.value
        console.log('isFullScreen', editor)
        if (editor.isFullScreen) {
          state.showAttachment = false
        } else {
          state.showAttachment = true
        }
        console.log(editor.getConfig(), '22222')

        if (state.form.TaskState == 2 && state.form.SubmitCheckState == 1) {
          editor.disable()
        } else {
          editor.enable()
        }
      }
      const disabledDate = (time) => {
        // 不能选当天之后的时间
        // 禁用当前日期之后的所有日期
        return time.getTime() > Date.now()
        //  - 8.64e7
      }

      const handleCreated = (editor) => {
        editorRef.value = editor
        // console.log('isFullScreen', editor.isFullScreen)
      }
      onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
      })

      const state = reactive({
        flag: false,
        formRef: null,
        form: {
          FinishDate: new Date(),
          TaskState: 1,
        },
        rules: {
          FinishDate: [
            {
              required: true,
              trigger: 'change',
              message: '请选择实际完成日期',
            },
          ],
          FinishNum: [
            {
              required: true,
              trigger: 'change',
              message: '请输入实际完成数量',
            },
          ],
          // SubmitTaskMemo: [
          //   { required: true, trigger: 'blur', message: '请填写详情说明' },
          // ],
        },
        title: '',
        dialogFormVisible: false,
        TaskCheckerList: [],
      })

      const showEdit = (row, num, TaskCheckerList) => {
        state.TaskCheckerList = TaskCheckerList
        // num==1 审核通过的
        if (num == 1) {
          state.flag = true
        } else {
          state.flag = false
        }
        if (!row) {
          state.title = '提交任务完成'
        } else {
          state.title = '提交任务完成'
          state.form = Object.assign({}, row)
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          roles: [],
        }

        console.log(editorRef, 'editorRef')
        state.dialogFormVisible = false
      }
      const save = () => {
        if (state.form.FinishNum <= 0) {
          ElMessage({
            message: '实际完成数量不能小于0',
            type: 'warning',
          })
          return
        }
        console.log(state.form, '123')
        state['formRef'].validate(async (valid) => {
          if (valid) {
            state.form.TaskState = 1
            const { msg } = await worktasklistEdit(state.form)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      return {
        ...toRefs(state),
        showEdit,
        handleCreated,
        editorRef,
        html,
        disabledDate,
        editorConfig,
        changeEditor,
        close,
        save,
      }
    },
  })
</script>
